<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core' %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>VOC-UI Demo</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/resources/css/start/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath()%>/resources/css/ui.jqgrid.css" />
 
<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style> 
 
<script src="<%=request.getContextPath()%>/resources/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/resources/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
var mydata = [
		{id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} ,
		{id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"},
		{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
		{id:"4",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
		{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",tax:"20.00",total:"320.00"}
		/*,
		{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",tax:"30.00",total:"430.00"},
		{id:"7",invdate:"2007-10-04",name:"test",note:"note",tax:"10.00",total:"210.00"},
		{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"21.00",total:"320.00"},
		{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
		{id:"11",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
		{id:"12",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
		{id:"13",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
		{id:"14",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
		{id:"15",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
		{id:"16",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
		{id:"17",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
		{id:"18",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
		{id:"19",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
		{id:"21",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
		{id:"22",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
		{id:"23",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
		{id:"24",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
		{id:"25",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
		{id:"26",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
		{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
		{id:"28",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
		{id:"29",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}*/
	];
var mydata2_1 = [
           		{id:"1", num:"11",item:"note", qty:"200.00",unit:"10.00",linetotal:"210.00"},
           		{id:"1", num:"12",item:"note2",qty:"300.00",unit:"20.00",linetotal:"320.00"},
           		{id:"1", num:"13",item:"note3",qty:"400.00",unit:"30.00",linetotal:"430.00"},
           		{id:"1", num:"14",item:"note", qty:"200.00",unit:"10.00",linetotal:"210.00"},
           		{id:"1", num:"15",item:"note2",qty:"300.00",unit:"20.00",linetotal:"320.00"}
           	];
           	
var mydata2_2 = [
      		{id:"2", num:"21",item:"note", qty:"200.00",unit:"10.00",linetotal:"210.00"},
      		{id:"2", num:"22",item:"note2",qty:"300.00",unit:"20.00",linetotal:"320.00"},
      		{id:"2", num:"23",item:"note3",qty:"400.00",unit:"30.00",linetotal:"430.00"},
      		{id:"2", num:"24",item:"note", qty:"200.00",unit:"10.00",linetotal:"210.00"},
      		{id:"2", num:"25",item:"note2",qty:"300.00",unit:"20.00",linetotal:"320.00"}
      	];
      	
var mydata2_3 = [
      		{id:"3", num:"23",item:"note", qty:"200.00",unit:"10.00",linetotal:"210.00"},
      		{id:"3", num:"23",item:"note2",qty:"300.00",unit:"20.00",linetotal:"320.00"},
      		{id:"3", num:"23",item:"note3",qty:"400.00",unit:"30.00",linetotal:"430.00"},
      		{id:"3", num:"23",item:"note", qty:"200.00",unit:"10.00",linetotal:"210.00"},
      		{id:"3", num:"23",item:"note2",qty:"300.00",unit:"20.00",linetotal:"320.00"}
      	];      
      	

var mydata2_4 = [
      		{id:"4", num:"24",item:"note", qty:"200.00",unit:"10.00",linetotal:"210.00"},
      		{id:"4", num:"24",item:"note2",qty:"300.00",unit:"20.00",linetotal:"320.00"},
      		{id:"4", num:"24",item:"note3",qty:"400.00",unit:"30.00",linetotal:"430.00"},
      		{id:"4", num:"24",item:"note", qty:"200.00",unit:"10.00",linetotal:"210.00"},
      		{id:"4", num:"24",item:"note2",qty:"300.00",unit:"20.00",linetotal:"320.00"}
      	];            		
      	
                                                                                           	
var mydata2_5 = [                                                                          	      		
      		{id:"5", num:"25",item:"note", qty:"200.00",unit:"10.00",linetotal:"210.00"},
      		{id:"5", num:"25",item:"note2",qty:"300.00",unit:"20.00",linetotal:"320.00"},
      		{id:"5", num:"25",item:"note3",qty:"400.00",unit:"30.00",linetotal:"430.00"},
      		{id:"5", num:"25",item:"note", qty:"200.00",unit:"10.00",linetotal:"210.00"},
      		{id:"5", num:"25",item:"note2",qty:"300.00",unit:"20.00",linetotal:"320.00"} 
      	];                                                                            	
	
$(document).ready(function() {	
	// master grid
	$("#list").jqGrid({
		data: mydata,
		datatype: "local",
		//height: 'auto',
		height: 300,
		rowNum: 30,
		rowList: [10,20,30],
	   	colNames:['<spring:message code="voc.info.userName2" arguments="가,나"/>','Date', 'Client', 'Amount','Tax','Total','Notes'],
	   	colModel:[
	   		{name:'id',index:'id', width:60, sorttype:"int"},
	   		{name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"},
	   		{name:'name',index:'name', width:100, editable:true},
	   		{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number", editable:true},
	   		{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true},		
	   		{name:'total',index:'total', width:80,align:"right",sorttype:"float"},		
	   		{name:'note',index:'note', width:150, sortable:false}		
	   	],
	   	pager: "#pager",
	   	viewrecords: true,
	   	sortname: 'name',
	   	grouping:true,
	   	groupingView : {
	   		groupField : ['name']
	   	},
	   	caption: "Master Data",
	   	onSelectRow: function(ids) {
				/* if(ids == null) {
					ids=0;
					if(jQuery("#list_d").jqGrid('getGridParam','records') >0 )
					{
						jQuery("#list_d").jqGrid('setGridParam',{id:ids});
						jQuery("#list_d").jqGrid('setCaption',"Detail Data: "+ids)
						.trigger('reloadGrid');
					}
				} else {
					//jQuery("#list_d").jqGrid('setGridParam',{url:"subgrid.php?q=1&id="+ids,page:1});
					jQuery("#list_d").jqGrid('setGridParam',{id:ids});	
					//jQuery("#list_d").jqGrid('setGridParam',{datatype:"local", data:mydata2_5}).trigger('reloadGrid');
					jQuery("#list_d").jqGrid('setGridParam',{datatype:"local", data:mydata2_1}).trigger('reloadGrid');
					jQuery("#list_d").jqGrid('setGridParam',{sortorder:"desc"}).trigger('reloadGrid');	
					jQuery("#list_d").jqGrid('setCaption',"Detail Data: "+ids).trigger('reloadGrid');
				} */
				var data = eval("mydata2_" + ids);
				jQuery("#list_d").jqGrid('setGridParam',{datatype:"local", data:data})
								 .jqGrid('setCaption',"Detail Data: "+ids)
								 .trigger('reloadGrid');
			}
	});
	
	/* for(var i=0;i<=mydata.length;i++)
		$("#list").jqGrid('addRowData',i+1,mydata[i]); */
	
	// detail grid
	//$("#list_d").jqGrid('navGrid','#pager10',{add:false,edit:false,del:false});
	$("#list_d").jqGrid({
		height: 200,
	   	//url:'subgrid.php?q=1&id=0',
		//datatype: "json",
		data: mydata2_1,
		datatype: "local",
	   	colNames:['11','No','Item', 'Qty', 'Unit','Line Total'],
	   	colModel:[
	   		{name:'id',index:'id', width:60, sorttype:"int"},
	   		{name:'num',index:'num', width:55},
	   		{name:'item',index:'item', width:180},
	   		{name:'qty',index:'qty', width:80, align:"right"},
	   		{name:'unit',index:'unit', width:80, align:"right"},		
	   		{name:'linetotal',index:'linetotal', width:80,align:"right", sortable:false, search:false}
	   	],
	   	rowNum:5,
	   	rowList:[5,10,20],
	   	pager: '#pager_d',
	   	sortname: 'no',
	    viewrecords: true,
	    sortorder: "asc",
		multiselect: true,
		caption:"Detail Data"
	}).navGrid('#pager_d',{add:false,edit:false,del:false});
	
	/* $("#ms1").click( function() {
		var s;
		s = jQuery("#list_d").jqGrid('getGridParam','id');
		alert(s);
	}); */
});	
</script>
</head>

<strong><spring:message code="voc.info.userName2" arguments="가,나"/></strong>
<br></br>
<strong><spring:message code="userName2" arguments="가,나"/></strong>

<body>
    <table id="list"></table> 
    <div id="pager"></div> 
    <br />
    <table id="list_d"></table>
	<div id="pager_d"></div>
	<a href="javascript:void(0)" id="ms1">Get Selected id's</a>
</body>
</html>